<template>
  <a-table :columns="columns" :data-source="dataSource" bordered>
    <template
        v-for="col in ['key','state','studyStyle', 'beginDate', 'endDate','schoolName','major','boss','praise','prove','tel','operation']"
        :slot="col"
        slot-scope="text, record"
    >
      <div :key="col">
        <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChange(e.target.value, record.key, col)"
        />
        <template v-else>
          {{ text }}
        </template>
      </div>
    </template>
    <template slot="operation" slot-scope="text, record">
      <div class="editable-row-operations">
        <span v-if="record.editable">
          <a @click="() => save(record.key)">Save</a>
          <a-popconfirm
              title="Sure to cancel?"
              @confirm="() => cancel(record.key)"
          >
            <a>Cancel</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <a :disabled="editingKey !== ''" @click="() => edit(record.key)"
          >Edit</a
          >
        </span>
        <span>
          <a :disabled="editingKey !== ''" @click="() => onDelete(record.key)">Delete</a>
        </span>
      </div>
    </template>
  </a-table>
</template>

<script>
import bus from './eventBus'
// const data = [
//   {
//     key:'01',
//     state:'在读',
//     studyStyle:'博士后',
//     beginDate:'1989/06/22',
//     endDate:'2020/12/25',
//     schoolName:'庆熙大学',
//     major:'唱歌',
//     boss:'JUNGYONGHWA',
//     praise:'2016-BestVocalSolo',
//     prove:'郑容和',
//     tel:'006-022-1989',
//     remarked:'CNBLUE',
//   },
// ]
const dataSource = [];
for (let i = 1; i < 51; i++) {
  dataSource.push({
    key:i.toString(),
    state:'未审批',
    studyStyle:'博士后',
    beginDate:'19890622',
    schoolName:'庆熙大学',
    major:'唱歌',
    boss:'JUNGYONGHWA',
    praise:'2016-BestVocalSolo',
    prove:'郑容和',
    tel:'006-022-1989',
    remarked:'CNBLUE',
  });
}
export default {
  created () {
    bus.$on("eduChange",(state,studyStyle, beginDate, endDate,schoolName,major,boss,praise,prove,tel,remarked,operation) =>{
      this.dataSource.push({
        state:state,
        studyStyle: studyStyle,
        beginDate: beginDate,
        schoolName:schoolName,
        major:major,
        boss:boss,
        praise:praise,
        prove:prove,
        tel:tel,
        remarked:remarked,
        operation:operation,
      })
      console.log(this.dataSource)
    })
  },
  data() {
    this.cacheData = dataSource.map(item => ({ ...item }));
    return {
      editingKey: "",
      dataSource,
      count: 2,
      columns: [
        {
          title:'序号',
          dataIndex:'key',
          scopedSlots: { customRender: 'key' },
        },
        {
          title:'状态',
          dataIndex:'state',
          scopedSlots: { customRender: 'state' },
        },
        {
          title: '学历类型',
          dataIndex: 'studyStyle',
          scopedSlots: { customRender: 'studyStyle' },
        },
        {
          title: '开始日期',
          dataIndex: 'beginDate',
          scopedSlots: { customRender: 'beginDate' },
        },
        {
          title: '学校名称',
          dataIndex: 'schoolName',
          scopedSlots: { customRender: 'schoolName' },
        },
        {
          title: '专业名称',
          dataIndex: 'major',
          scopedSlots: { customRender: 'major' },
        },
        {
          title: '干部名称',
          dataIndex: 'boss',
          scopedSlots: { customRender: 'boss' },
        },
        {
          title: '获奖证书',
          dataIndex: 'praise',
          scopedSlots: { customRender: 'praise' },
        },
        {
          title: '证明人',
          dataIndex: 'prove',
          scopedSlots: { customRender: 'prove' },
        },
        {
          title: '联系电话',
          dataIndex: 'tel',
          scopedSlots: { customRender: 'tel' },
        },
        {
          title:'备注',
          dataIndex:'remarked',
          scopedSlots:{customRender:'remarked'},
        },
        {
          title:'操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
        
      ],
    };
  },
  methods: {
    handleChange(value, key, column) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.dataSource = newData;
      }
    },
    edit(key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.dataSource = newData;
      }
    },
    save(key) {
      const newData = [...this.dataSource];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.dataSource = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel(key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
        delete target.editable;
        this.dataSource = newData;
      }
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dataSource = dataSource;
      }
    },
    onDelete(key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
    },
    handleAdd() {
      const { count, dataSource } = this;
      const newData = {
        key: count,
        name: `Edward King ${count}`,
        age: 32,
        address: `London, Park Lane no. ${count}`,
      };
      this.dataSource = [...dataSource, newData];
      this.count = count + 1;
    },
    
  },
  
};   
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>